<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <script type="text/javascript" src="../../js/jquery/jquery.js">
        </script>
        <script type="text/javascript" src="../../js/jquery/jquery-migrate.js">
        </script>
        <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js">
        </script>		
        <script type="text/javascript" src="../../js/ctp/public/jsextend.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/public/ctp.core.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/public/ctp.base.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/public/ctp.ui.component.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/panel/ctp.ui.panel.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/groupbox/ctp.ui.groupbox.js">
		</script>
		<script type="text/javascript" src="../../js/ctp/gridlayout/ctp.ui.gridlayout.js">
        </script>	
        <script type="text/javascript" src="../../js/ctp/label/ctp.ui.label.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/textfield/ctp.ui.textfield.js">
        </script>	
        <script type="text/javascript" src="../../js/ctp/accordion/ctp.ui.accordion.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/accordion/ui.accordion.js">
        </script>
        
		<script type="text/javascript" src="../../js/ctp/messagebox/ctp.ui.messagebox.js"></script>
        <link href="../../css/skins/standard/ctp-common.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/panel.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/button.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/groupbox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/gridlayout.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/messagebox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/label.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/textfield.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/accordion.css" rel="stylesheet" type="text/css"/>
		
        <script>
            // ctp.core.log.lvl=ctp.core.loglvl.info;            
            $(document).ready(function(){ 	
            	var gridlayout1 = new ctp.ui.gridlayout({
	                    id: 'gridlayout1',
	                    layout: 'rows',
	                    items: [[{label: {text: '列:'},element: {type: 'textfield',options:{id:'textfield1'}}},{label: {text: '列:'},element: {type: 'textfield',options:{id:'textfield2'}}}],
						[{label: {text: '列:'},element: {type: 'textfield',options:{id:'textfield3'}}},{label: {text: '列:'},element: {type: 'textfield',options:{id:'textfield4'}}}],
						[{label: {text: '列:'},element: {type: 'textfield',options:{id:'textfield5',validate:'rules[required]'}}},{label: {text: '列:'},element: {type: 'textfield',options:{id:'textfield6'}}}],
						[{label: {text: '列:'},element: {type: 'textfield',options:{id:'textfield7'}}},{label: {text: '列:'},element: {type: 'textfield',options:{id:'textfield8'}}}]]
	                });	                 
				var accordion1 = new ctp.ui.accordion({
                    id: 'accordion1',
                    width:'400',
                    height:'400',
                    items:[{title:'第一个标签',items: ['333',new ctp.ui.button({id:'dfdfdfd'})]},{title: '第二个标签',items: [gridlayout1]}]
                });
               
                var button1=new ctp.ui.button({
                    id: 'button1',
                    text: '设置宽度为300px',
                    width: '100%',
                    onClick: function(){
                        accordion1.setWidth('300px',true);
                    }
                });
                var button2=new ctp.ui.button({
                    id: 'button2',
                    text: '设置高度为300px',
                    width: '100%',
                    onClick: function(){
                        accordion1.setHeight('300px',true);
                    }
                });
                var button3=new ctp.ui.button({
                    id: 'button3',
                    text: '是否显示',
                    width: '100%',
                    onClick: function(){                
						ctpMSB.alert({title:'信息提示',message:accordion1.getVisible()});
                    }
                });
               var button4= new ctp.ui.button({
                    id: 'button4',
                    text: '显示组件',
                    width: '100%',
                    onClick: function(){
                        accordion1.setVisible(true);
                    }
                });
                var button5=new ctp.ui.button({
                    id: 'button5',
                    text: '隐藏组件',
                    width: '100%',
                    onClick: function(){
                        accordion1.setVisible(false);
                    }
                });
				var button6= new ctp.ui.button({
                    id: 'button6',
                    text: '取得ID为textfield1组件的ID',
                    width: '100%',
                    onClick: function(){						
						ctpMSB.alert({title:'信息提示',message:accordion1.getObj('textfield1').getId('textfield1')});                       
                    }
                });
				var button7= new ctp.ui.button({
                    id: 'button7',
                    text: '取得组件名称',
                    width: '100%',
                    onClick: function(){
						ctpMSB.alert({title:'信息提示',message:accordion1.getName()});						                        
                    }
                });
				var button8= new ctp.ui.button({
                    id: 'button8',
                    text: '取得组件类型',
                    width: '100%',
                    onClick: function(){						  
						ctpMSB.alert({title:'信息提示',message:accordion1.getCtpWebType()});                      
                    }
                });
                var button9= new ctp.ui.button({
                    id: 'button9',
                    text: '取得组件ID',
                    width: '100%',
                    onClick: function(){						  
						ctpMSB.alert({title:'信息提示',message:accordion1.getId()});             
                    }
                });
                var button10= new ctp.ui.button({
                    id: 'button10',
                    text: '取得需要验证组件的数目',
                    width: '100%',
                    onClick: function(){						  
						ctpMSB.alert({title:'信息提示',message:accordion1.getVidateArray().length});                      
                    }
                });
                var button11= new ctp.ui.button({
                    id: 'button11',
                    text: '取得需要提交组件的数目',
                    width: '100%',
                    onClick: function(){						  
						ctpMSB.alert({title:'信息提示',message:accordion1.getSubmitArray().length});                      
                    }
                });
                var button12= new ctp.ui.button({
                    id: 'button12',
                    text: '取得类型为textfield组件的数目',
                    width: '100%',
                    onClick: function(){						  
						ctpMSB.alert({title:'信息提示',message:accordion1.getObjs('textfield').length});
                    }
                });
                var button13= new ctp.ui.button({
                    id: 'button13',
                    text: '删除两个textfield组件',
                    width: '100%',
                    onClick: function(){						  
						accordion1.delObjs(['textfield1','textfield2']);
                    }
                });
                var button14= new ctp.ui.button({
                    id: 'button14',
                    text: '重置组件',
                    width: '100%',
                    onClick: function(){	
                    	accordion1.reset();
                    }
                });
                var button15= new ctp.ui.button({
                    id: 'button15',
                    text: '添加一个组件',
                    width: '100%',
                    onClick: function(){
                    	accordion1.append([buttontest],1);
                    }
                });
                var button16= new ctp.ui.button({
                    id: 'button16',
                    text: '强制渲染组件',
                    width: '100%',
                    onClick: function(){
                    	accordion1.render(-1);
                    }
                });
                var button17= new ctp.ui.button({
                    id: 'button17',
                    text: '设置active为0',
                    width: '100%',
                    onClick: function(){
                    	accordion1.setActive(0);
                    }
                });
				var button18= new ctp.ui.button({
                    id: 'button18',
                    text: '测试',
                    width: '100%',
                    onClick: function(){
                    	var test = [];
						test.push('contentHeight: '+accordion1.contentHeight+'\n');
						test.push('contentJqDom: '+accordion1.contentJqDom+'\n');
						test.push('contentWidth: '+accordion1.contentWidth+'\n');
						test.push('ctpPackage: '+accordion1.ctpPackage+'\n');
						//test.push('getTemplate: '+accordion1.getTemplate({})+'\n');
						test.push('initEvent: '+accordion1.initEvent()+'\n');
						test.push('initSettings: '+accordion1.initSettings+'\n');
						test.push('isContainer: '+accordion1.isContainer+'\n');
						test.push('isHidden: '+accordion1.isHidden+'\n');
						test.push('isNeedRender: '+accordion1.isNeedRender+'\n');
						test.push('isNeedReset: '+accordion1.isNeedReset+'\n');
						test.push('items: '+accordion1.items+'\n');
						test.push('jqDom: '+accordion1.jqDom+'\n');
						test.push('resize: '+accordion1.resize()+'\n');
						test.push('resize: '+accordion1.onResize('100','50')+'\n');
						test.push('settings: '+accordion1.settings+'\n');
						test.push('type: '+accordion1.type+'\n');
						test.push('version: '+accordion1.version+'\n');
						//test.push('rendered: '+accordion1.rendered+'\n');
						//test.push('renderTo: '+accordion1.renderTo()+'\n');
						//test.push('render: '+accordion1.render()+'\n');
						//test.push('remove: '+accordion1.remove()+'\n');
						alert(test.join(''));

						test = [];
						//test.push('afterInit: '+accordion1.afterInit()+'\n');
						test.push('afterInit: '+accordion1.afterInit()+'\n');
						//test.push('append: '+accordion1.append()+'\n');
						test.push('delObjs: '+accordion1.delObjs()+'\n');
						//test.push('destroy: '+accordion1.destroy()+'\n');
						test.push('getContentDomId: '+accordion1.getContentDomId()+'\n');
						test.push('getContentJqDom: '+accordion1.getContentJqDom()+'\n');
						test.push('getCtpWebType: '+accordion1.getCtpWebType()+'\n');
						test.push('getDefaultSettings: '+accordion1.getDefaultSettings()+'\n');
						test.push('getDomId: '+accordion1.getDomId()+'\n');
						test.push('getFnContext: '+accordion1.getFnContext()+'\n');
						test.push('getHeight: '+accordion1.getHeight()+'\n');
						test.push('getId: '+accordion1.getId()+'\n');
						test.push('getInitSettings: '+accordion1.getInitSettings()+'\n');
						//test.push('getItems: '+accordion1.getItems()+'\n');
						test.push('getJqDom: '+accordion1.getJqDom()+'\n');
						test.push('getName: '+accordion1.getName()+'\n');
						//test.push('getObj: '+accordion1.getObj('button16')+'\n');
						//test.push('getObjs: '+accordion1.getObjs()+'\n');
						test.push('getPkgContext: '+accordion1.getPkgContext()+'\n');
						test.push('getSettings: '+accordion1.getSettings()+'\n');
						test.push('getWidth: '+accordion1.getWidth()+'\n');
						//test.push('getSubmitArray: '+accordion1.getSubmitArray()+'\n');
						//test.push('getValidateArray: '+accordion1.getValidateArray()+'\n');
						test.push('getWidth: '+accordion1.getWidth()+'\n');
						test.push('hide: '+accordion1.hide(false,true,true)+'\n');
						alert('hide')
						//test.push('init: '+accordion1.init()+'\n');
						test.push('removeJqDoms: '+accordion1.removeJqDoms()+'\n');
						//test.push('renderItem: '+accordion1.renderItem()+'\n');
						//test.push('renderItems: '+accordion1.renderItems()+'\n');
						//test.push('reset: '+accordion1.reset()+'\n');
						//test.push('resizeItems: '+accordion1.resizeItems()+'\n');
						//test.push('setWidth: '+accordion1.setWidth('400px')+ ' ' + (accordion1.getWidth()==400) +'\n');
						//test.push('setHeight: '+accordion1.setHeight('50px')+ ' ' + (accordion1.getHeight()==50) + '\n');
						//test.push('setSize: '+accordion1.setSize('400px','100px')+ ' ' + (accordion1.getHeight()==100 && accordion1.getWidth()==400) + '\n');
						test.push('show: '+accordion1.show()+'\n');
						alert('show');
						alert(test.join(''));

						test = [];
						//test.push('getAccordionTemplate: '+accordion1.getAccordionTemplate({})+'\n');
						//test.push('onResize: '+accordion1.onResize()+'\n');
						//test.push('getItem: '+accordion1.getItem()+'\n');
						//test.push('accordionWrap: '+accordion1.accordionWrap()+'\n');
						test.push('setActive: '+accordion1.setActive()+'\n');
						test.push('getVisible: '+accordion1.getVisible()+'\n');
						test.push('setVisible: '+accordion1.setVisible(true)+'\n');
						//test.push('remove: '+accordion1.remove()+'\n');
						alert(test.join(''));	
                    }
                });
				var buttontest = new ctp.ui.button({
					id:'buttontest',
					width:'100%'
					
				})
                
                var showLayout = new ctp.ui.gridlayout({
					id:'showLayout',
                    width: '100%',
                    cols: 1,
                    align: 'center',
                    colSpace: 30,
                    items: [[{element: accordion1}]]
                
                });  
				var showGroupbox=new ctp.ui.groupbox({
			  	    id: 'showGroupbox',					
					items:[showLayout],
					title:'效果展示区'						   
			     });
				var buttonsLayout = new ctp.ui.gridlayout({
					id:'buttonsLayout',
                    width: '98%',
                    cols: 3,
                    align: 'center',
                    colSpace: 30,
                    items: [
					     [{element: button1},{element: button2},{element: button3}],
						 [{element: button4},{element: button5},{element: button6}],
						 [{element: button7},{element: button8},{element: button9}],
						 [{element: button10},{element: button11},{element: button12}],
						 [{element: button13},{element: button14},{element: button15}],
						 [{element: button16},{element: button17},{element: button18}]
					]
                
                }); 
				var buttonsGroupbox=new ctp.ui.groupbox({
			  	    id: 'buttonsGroupbox',						
					items:[buttonsLayout],
					width:'100%',
					title:'功能测试区'						   
			     });
				new ctp.ui.panel({
                    title: 'accordion实例',
                    collapsible: true,
                    width: '550px',
                    height: 'auto',
					align:'center',
					items:[showGroupbox,buttonsGroupbox],
                    renderTo: 'body'
                });  
				          
            });
			
        </script>
    </head>
    <BODY>
        <b>ctp.ui.accordion 实例</b>
        <hr/>
        <br/>  
    </BODY>
</html>
